<template>
    <div class="container">
        <div class="padding">
            <cmsTitle no-back />
            <el-tabs v-model="activeName" type="card">
                <el-tab-pane v-for="i in navList" :key="i[0]" :label="i[0]" />
            </el-tabs>
        </div>
        <keep-alive>
            <component :is="navList[activeName][1]" style="flex:1" :layout="navList[activeName][0]" />
        </keep-alive>
    </div>
</template>

<script>
import layoutA from './page/layoutA'
import agreement from './page/agreement'
import cmstag from './page/tag'
export default {
    components: {
        layoutA,
        agreement,
        cmstag
    },
    props: {},
    data () {
        return {
            activeName: '0',
            navList: [
                ['协议文档', 'agreement'],
                ['标签档案', 'cmstag'],
                // ['城市档案', 'layoutA'],
                ['关注领域', 'layoutA'],
                ['所属行业', 'layoutA'],
                ['主营范围', 'layoutA'],
                ['学校名称', 'layoutA'],
                ['所学专业', 'layoutA'],
                ['最高学历', 'layoutA'],
                ['举报原因', 'layoutA'],
                ['常见问题', 'layoutA']
            ]
        }
    },
    computed: {
        select () {
            return this.navList[this.activeName][1]
        }
    },
    watch: {
        activeName (val) {
            sessionStorage.setItem('generalActive', val)
        }
    },
    created () {
        if (sessionStorage.generalActive) {
            this.activeName = sessionStorage.generalActive
        }
    },
    mounted () {},
    methods: {}
}
</script>

<style scoped lang="stylus">
.padding
    padding 0 40px
    background #fff
.container::v-deep
    min-height: 100%
    display: flex
    flex-direction: column
</style>
